<template>
  <l-data-panel :label="data.label" isApp>
    <l-echarts ref="main"></l-echarts>
  </l-data-panel>
</template>
<script>
export default {
  props: ["data", "isPreview", "isShow"],
  data() {
    return {
      option: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        xAxis: {
          type: "category",
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [],
            type: "bar",
            /*label: {
                        position: 'top',
                        show: true
                    },*/
            showBackground: false,
            backgroundStyle: {
              color: "",
            },
          },
        ],
      },
      timer: null,
    };
  },
  watch: {
    isShow() {
      setTimeout(() => {
        this.$refs.main.updateChart();
      }, 100);
    },
    data: {
      handler() {
        this.refresh();
      },
      deep: true,
    },
  },

  mounted() {
    this.refresh();
  },
  methods: {
    async getOption() {
      if (this.data.dataType == "Y") {
        this.option.xAxis = {
          type: "category",
          data: [],
        };
        this.option.yAxis = {
          type: "value",
        };
      } else {
        this.option.xAxis = {
          type: "value",
        };
        this.option.yAxis = {
          type: "category",
          data: [],
        };
      }

      this.option.series.forEach((item) => {
        item.showBackground = this.data.showBackground;
        item.backgroundStyle.color = this.data.backgroundColor;
      });

      let data = [];
      if (this.data.mode == 0) {
        if (this.data.apiCode) {
          await this.lr_loadApiDataSourceData(this.data.apiCode, this.data.apiUrl, !!this.isPreview);
        }
        data = this.lr_apiDataSourceData[this.data.apiCode] || [];
      } else {
        // 加载数据
        if (this.data.dataCode) {
          await this.lr_loadDataSourceData(this.data.dataCode, !!this.isPreview);
        }

        data = this.lr_dataSourceData[this.data.dataCode] || [];
      }

      if (this.data.XKey && this.data.YKey) {
        const xList = [];
        const yList = [];

        data.forEach((item) => {
          xList.push(item[this.data.XKey]);
          yList.push(item[this.data.YKey]);
        });

        if (this.data.dataType == "Y") {
          this.option.series[0].data = yList;
          this.option.xAxis.data = xList;
        } else {
          this.option.series[0].data = xList;
          this.option.yAxis.data = yList;
        }
      }

      return this.option;
    },
    refresh() {
      if (this.timer == null) {
        this.timer = setTimeout(async () => {
          const option = await this.getOption();
          this.$refs.main.updateChart(option);
          this.timer = null;
        }, 100);
      }
    },
  },
};
</script>
